<template>
<div>
	<el-form 
		:model="configInfo" 
		label-width="180px"
		>
		<el-form-item label="客服电话：" >
			<el-input v-model="configInfo.mobile" placeholder="请输入客服电话" 
			style="width:300px;"></el-input>
		</el-form-item>

		<el-form-item label="公众号二维码：" >
			<el-upload
			  class="avatar-uploader"
			  :action="URL.upload"
			  :data="para"
			  :show-file-list="false"
			  :before-upload="beforeAvatarUpload"
			  :on-success="QRCodeHandleAvatarSuccess">
			  <img v-if="configInfo.qrcodeimg" :src="configInfo.qrcodeimg" class="avatar">
			  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
		</el-form-item>

		<el-form-item label="分销商城标题：" >
			<el-input v-model="configInfo.share_title" placeholder="请输入分销商城标题" 
			style="width:300px;"></el-input>
		</el-form-item>

		<el-form-item label="分销商城描述：" >
			<el-input v-model="configInfo.share_describe" placeholder="请输入分销商城描述" 
			style="width:300px;"></el-input>
		</el-form-item>

		<el-form-item label="分享商城图片：" >
			<el-upload
			  class="avatar-uploader"
			  :action="URL.upload"
			  :data="para"
			  :show-file-list="false"
			  :before-upload="beforeAvatarUpload"
			  :on-success="shareImgHandleAvatarSuccess">
			  <img v-if="configInfo.share_img" :src="configInfo.share_img" class="avatar">
			  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
		</el-form-item>

		<el-form-item label="默认分销级别：" >
			<el-select v-model="configInfo.level_code" placeholder="请选择">
			    <el-option
			      v-for="item in distributionSystemList.results"
			      :key="item.code"
			      :label="item.title"
			      :value="item.code">
			    </el-option>
			</el-select>
		</el-form-item>

		<el-form-item >
		     <el-button type="primary" 
		     @click="save()">
		     保存</el-button>
		</el-form-item>

	</el-form>	

</div>		
</template>

<script>

import Vue from 'vue'
import { mapGetters } from 'vuex'

export default {
	name: 'shopconfiguration',
	data () {
		return {
		}
	},

	props: {
		configInfo : Object,
	},

	components: {
		
	},

	computed : {
		...mapGetters([
			'distributionSystemList',
			'userInfo',
			'URL',
			'common',
		]),

		para () {
			return {
				dir : this.userInfo.company_code + '/shopconfig/',
			}
		},
	},

	methods : {
		beforeAvatarUpload (file) {
	        const isLtM = file.size / 1024 / 1024 < this.common.imgMaxSize;

	        if (!isLtM) {
	          this.$message.error('上传图片大小不能超过 ' + this.common.imgMaxSize + 'MB!');
	        }
	        return isLtM;
		},

		QRCodeHandleAvatarSuccess(res, file) {
			console.log(res);
			
        	//this.configInfo.qrcodeimg = res.url;

        	Vue.set(this.configInfo, 'qrcodeimg', res.url);
      	},

      	shareImgHandleAvatarSuccess (res, file) {
      		//this.configInfo.share_img = res.url;

      		Vue.set(this.configInfo, 'share_img', res.url);
      	},

      	save () {
      		let para = {
      			id : this.configInfo.id,
      			qrcodeimg : this.configInfo.qrcodeimg,
      			share_title : this.configInfo.share_title,
      			share_describe : this.configInfo.share_describe,
      			share_img : this.configInfo.share_img,
      			level_code : this.configInfo.level_code,
      			mobile : this.configInfo.mobile,
      			cb : res => {
					this.$notify({
			          title: '成功',
			          message: '保存成功',
			          type: 'success'
			        });
				},
				err : res => {
					this.$notify({
			          title: '保存失败',
			          message: res,
			          type: 'error'
			        });
				}
      		};

      		this.$store.dispatch('updateConfig_share', para);
      	},
	},

	watch : {
	    
	},

	mounted () {
		
		this.$store.dispatch('getDistributionSystemList');
	},

}
</script>

<style >
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
